<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 
    <title>Document</title>
</head>
<body>
    <!-- 
        图片标签用于向当前页面中引入一个外部图片
        使用img标签引入外部图片，img标签是一个自结束标签
        img这种元素属于替换元素（块与行内元素之间，具有两种元素的特点）
        属性：
          src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
           alt 图片的描述，这个描述默认情况不会显示，有些浏览器会图片无法加载时显示
                
           width 图片的宽度（单位是像素）
           height 图片的高度（）
                -宽度和高度中如果只修改了一个，则另一个会等比例缩放

            注意：
                一般情况在pc端，不建议修改图片的大小,需要多大就裁多大
                但是在移动端，经常需要对图片进行缩放（大图缩小）、

        图片的格式：
            jpeg（jpg）
                -支持的颜色比较丰富，不支持透明效果，不支持动图
                -一般用来表示照片
            gif 
                -支持的颜色比较少，支持简单透明，支持动图
                -颜色单一的图片，动图
            png
                -支持的颜色丰富，支持复杂透明，不支持动图
                -颜色丰富，复杂透明图片（专为网页而生）
            webp
                -这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
                -它具备了其他图片格式的所有优点，而且文件还特别小
                -缺点：兼容性不好

            base64 
                -将图片使用base64进行编码
                -一般都是一些需要和网页一起加载的图片才会使用base64
            效果一样，用小的
            效果不一样，用效果好的

        -->
     
     <img width="200" height="200" src="./img/狗卷.jpeg" alt="狗卷头像">
    <img src="./img/狗卷动图.gif" alt="狗卷动图">
    <img src="" alt="">
</body>
</html>